<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 20px auto;
            text-align: center;
        }

        a{
           
            text-decoration: none;
            color: #222;
        }
        a:hover{
            color:red;
        }
        .contaner{
            width:500px;
        }
        .add{
            display: block;
            width:200px;
            height:30px;
            text-align: center;
            line-height:30px;
            font-size:20px;
            background:#f57;
            color: #fff;
            border-radius:5px;
            margin:5px auto;
        }
        .add:hover{
            opacity:0.8;
            color:#eee;
        }

    </style>
</head>

<body>
    <div class="container">
        
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>用户名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>手机号</td>
                    <td>编辑</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <a href="/add.html" class="add">添加</a>
    </div>
    <script src="/jquery.min.js"></script>
    <script>
        $.get('/users', function (data) {
            console.log(data);
            $(data).map(function (index, val) {//遍历循环data
                var row = ''
                row += '<tr><td>' + val.id + '</td><td>' + val.username + '</td><td>' 
                    + val.age + '</td><td>' + val.sex + '</td><td>' + val.phone + 
                        '</td><td><a href="/update.html#'+val.id+'">编辑</a></td><td><button onclick="del(' + val.id + ')">删除</button></td></tr>'//将返回的值插到table
                $('table tbody').append(row);
            })
        })
        function del(id) {
            if (confirm('确定要删除吗？')) {//给一个判断，给用户一个选择的机会
                $.get('/users/del', { id: id }).done(function () {//将获取的id 发送到后台
                    location.reload()//重新刷新下页面
                })
            }

        }
    </script>
</body>

</html>